// Hook
import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'

// 传统的类组件
// class TestState extends React.Component {
//   state = {
//     count: 0,
//   }
//   render() {
//     return (
//       <div>
//         <div>当前数量：{this.state.count}</div>
//         <div>
//           <button onClick={this.handleClick}>点击</button>
//         </div>
//       </div>
//     )
//   }
//   handleClick = () => {
//     this.setState({
//       count: this.state.count + 1,
//     })
//   }
// }

// 基于Hook方式实现状态的管理
function TestState() {
  // useState方法就是React内置的一个Hook方法，用于提供函数组件的状态和修改状态的方法
  // useState需要在函数组件的顶层使用，比如，不可以放到条件分支中
  const [count, setCount] = useState(0)
  const [info, setInfo] = useState('hello')

  // useEffect函数相当于之前类组件的生命周期函数
  // componentDidMount 和 componentDidUpdate 的组合
  useEffect(() => {
    console.log('hello')
  })

  const handleClick = () => {
    setCount(count + 1)
    setInfo('nihao')
  }

  return (
    <div>
      <div>
        当前数量：{info} {count}
      </div>
      <div>
        <button onClick={handleClick}>点击</button>
      </div>
    </div>
  )
}

class App extends React.Component {
  render() {
    return <TestState />
  }
}

ReactDOM.render(<App />, document.getElementById('root'))
